<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/sm.min.css">
    <link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css"/>

    <link rel="stylesheet" type="text/css" href="../easyui/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>

    <style>
        table {
            border-collapse: collapse;
            border-spacing: 0px;
            width: 100%;
            border: #000 solid 0px;
        }

        table td {
            border: 1px solid #000;
            height: 25px;
            text-align: center;
            border-left: 0px;
        }

        table th {
            background: #edd3d4;
            color: #a10333;
            border: #000 solid 1px;
            white-space: nowrap;
            height: 21px;
            border-top: 0px;
            border-left: 0px;
        }

        .t_left {
            width: 30%;
            height: auto;
            float: left;
            border-top: 1px solid #000;
            border-left: 1px solid #000;
        }

        /*t_r_content和cl_freeze高度相差20px， 高度为外观显示高度，可根据情况调整*/
        .t_r_content {
            width: 100%;
            height: 220px;
            background: #fff;
            overflow: auto;
        }

        .cl_freeze {
            height: 200px;
            overflow: hidden;
            width: 100%;
        }

        /* width 调整左边标题列宽度（左侧外观显示宽度）; 指定为width:auto 在Opera下显示有问题; height比 t_r_content 高度小20px*/
        /* width 宽度为 右侧外观显示宽度 实际显示宽度大小为“t_r”宽度加上“cl_freeze”宽度 */
        /* 如果显示不正常，调整 t_r的width 使其和t_left的width之和小于100%；等于100%时会有问题*/
        .t_r {
            width: 69.5%;
            height: auto;
            float: left;
            border-top: 1px solid #000;
            border-right: #000 solid 1px;
        }

        .t_r table {
            width: 1700px;
        }

        .t_r_title {
            width: 1720px;
        }

        /*宽度比 t_r table 大20px （至少大20，小了滚动条滑到右侧显示有问题）*/
        .t_r_t {
            width: 100%;
            overflow: hidden;
        }

        .bordertop {
            border-top: 0px;
        }
    </style>
    <script>
        function aa() {
            var a = document.getElementById("t_r_content").scrollTop;
            var b = document.getElementById("t_r_content").scrollLeft;
            document.getElementById("cl_freeze").scrollTop = a;
            document.getElementById("t_r_t").scrollLeft = b;
        }
    </script>
</head>
<body>
<div class="page-group">
    <!-- 单个page ,第一个.page默认被展示-->
    <div class="page">
        <!-- 标题栏 -->
        <header class="bar bar-nav">
            <h1 class="title">标题</h1>
        </header>

        <!-- 工具栏 -->
        <nav class="bar bar-tab">
            <a class="tab-item external active" href="#">
                <span class="icon icon-home"></span>
                <span class="tab-label">首页</span>
            </a>
            <a class="tab-item external" href="#">
                <span class="icon icon-star"></span>
                <span class="tab-label">收藏</span>
            </a>
            <a class="tab-item external" href="#">
                <span class="icon icon-settings"></span>
                <span class="tab-label">设置</span>
            </a>
        </nav>

        <div class="content">
            <div style="width:100%">
                <div class="t_left">
                    <div style="width:100%;">
                        <table>
                            <tr>
                                <th style="width:40%">账号</th>
                                <th style="width:60%">姓名</th>
                            </tr>
                        </table>
                    </div>
                    <div class="cl_freeze" id="cl_freeze">
                        <table>
                            <tr>
                                <td style="width:40%" class="bordertop">1</td>
                                <td style="width:60%" class="bordertop">1</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>2</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>3</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>4</td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>5</td>
                            </tr>
                            <tr>
                                <td>6</td>
                                <td>6</td>
                            </tr>
                            <tr>
                                <td>7</td>
                                <td>7</td>
                            </tr>
                            <tr>
                                <td>8</td>
                                <td>8</td>
                            </tr>
                            <tr>
                                <td>9</td>
                                <td>9</td>
                            </tr>
                            <tr>
                                <td>10</td>
                                <td>10</td>
                            </tr>
                            <tr>
                                <td>11</td>
                                <td>11</td>
                            </tr>
                            <tr>
                                <td>12</td>
                                <td>12</td>
                            </tr>
                            <tr>
                                <td>13</td>
                                <td>13</td>
                            </tr>
                            <tr>
                                <td>14</td>
                                <td>14</td>
                            </tr>
                            <tr>
                                <td>15</td>
                                <td>15</td>
                            </tr>
                            <tr>
                                <td>16</td>
                                <td>16</td>
                            </tr>
                            <tr>
                                <td>17</td>
                                <td>17</td>
                            </tr>
                            <tr>
                                <td>18</td>
                                <td>18</td>
                            </tr>
                            <tr>
                                <td>19</td>
                                <td>19</td>
                            </tr>
                            <tr>
                                <td>20</td>
                                <td>20</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="t_r">
                    <div class="t_r_t" id="t_r_t">
                        <div class="t_r_title">
                            <table>
                                <tr>
                                    <th width="10%">字段A</th>
                                    <th width="20%">字段B</th>
                                    <th width="10%">字段C</th>
                                    <th width="20%">字段D</th>
                                    <th width="20%">字段E</th>
                                    <th width="20%">字段F</th>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="t_r_content" id="t_r_content" onscroll="aa()">
                        <table>
                            <tr>
                                <td width="10%" class="bordertop">1</td>
                                <td width="20%" class="bordertop">1</td>
                                <td width="10%" class="bordertop">1</td>
                                <td width="20%" class="bordertop">1</td>
                                <td width="20%" class="bordertop">1</td>
                                <td width="20%" class="bordertop">1</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>2</td>
                                <td>2</td>
                                <td>2</td>
                                <td>2</td>
                                <td>2</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>3</td>
                                <td>3</td>
                                <td>3</td>
                                <td>3</td>
                                <td>3</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>4</td>
                                <td>4</td>
                                <td>4</td>
                                <td>4</td>
                                <td>4</td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>5</td>
                                <td>5</td>
                                <td>5</td>
                                <td>5</td>
                                <td>5</td>
                            </tr>
                            <tr>
                                <td>6</td>
                                <td>6</td>
                                <td>6</td>
                                <td>6</td>
                                <td>6</td>
                                <td>6</td>
                            </tr>
                            <tr>
                                <td>7</td>
                                <td>7</td>
                                <td>7</td>
                                <td>7</td>
                                <td>7</td>
                                <td>7</td>
                            </tr>
                            <tr>
                                <td>8</td>
                                <td>8</td>
                                <td>8</td>
                                <td>8</td>
                                <td>8</td>
                                <td>8</td>
                            </tr>
                            <tr>
                                <td>9</td>
                                <td>9</td>
                                <td>9</td>
                                <td>9</td>
                                <td>9</td>
                                <td>9</td>
                            </tr>
                            <tr>
                                <td>10</td>
                                <td>10</td>
                                <td>10</td>
                                <td>10</td>
                                <td>10</td>
                                <td>10</td>
                            </tr>
                            <tr>
                                <td>11</td>
                                <td>11</td>
                                <td>11</td>
                                <td>11</td>
                                <td>11</td>
                                <td>11</td>
                            </tr>
                            <tr>
                                <td>12</td>
                                <td>12</td>
                                <td>12</td>
                                <td>12</td>
                                <td>12</td>
                                <td>12</td>
                            </tr>
                            <tr>
                                <td>13</td>
                                <td>13</td>
                                <td>13</td>
                                <td>13</td>
                                <td>13</td>
                                <td>13</td>
                            </tr>
                            <tr>
                                <td>14</td>
                                <td>14</td>
                                <td>14</td>
                                <td>14</td>
                                <td>14</td>
                                <td>14</td>
                            </tr>
                            <tr>
                                <td>15</td>
                                <td>15</td>
                                <td>15</td>
                                <td>15</td>
                                <td>15</td>
                                <td>15</td>
                            </tr>
                            <tr>
                                <td>16</td>
                                <td>16</td>
                                <td>16</td>
                                <td>16</td>
                                <td>16</td>
                                <td>16</td>
                            </tr>
                            <tr>
                                <td>17</td>
                                <td>17</td>
                                <td>17</td>
                                <td>17</td>
                                <td>17</td>
                                <td>17</td>
                            </tr>
                            <tr>
                                <td>18</td>
                                <td>18</td>
                                <td>18</td>
                                <td>18</td>
                                <td>18</td>
                                <td>18</td>
                            </tr>
                            <tr>
                                <td>19</td>
                                <td>19</td>
                                <td>19</td>
                                <td>19</td>
                                <td>19</td>
                                <td>19</td>
                            </tr>
                            <tr>
                                <td>20</td>
                                <td>20</td>
                                <td>20</td>
                                <td>20</td>
                                <td>20</td>
                                <td>20</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="page">...</div>
</div>

<script src="./zepto.min.js"></script>
<script src="./js/sm.min.js"></script>

<script>
    //    $(function () {
    //        $(document).on("pageInit", function () {
    //            $('.buttons-tab').fixedTab({offset: 44});
    //        });
    //        $.init();
    //    });

</script>
</body>
</html>